<template>
  <!-- 背景图片(完成) -->
    <div :class="store.backgroundShow ? 'cover show' : 'cover'">
        <img
                v-show="store.imgLoadStatus"
                :src="bgUrl"
                alt="cover"
                class="bg"
        />
        <div :class="store.backgroundShow ? 'gray hidden' : 'gray'"/>
        <Transition mode="out-in" name="fade">
            <a
                    v-if="store.backgroundShow"
                    :href="bgUrl"
                    class="down"
                    target="_blank"
            >
                下载壁纸
            </a>
        </Transition>
    </div>
</template>

<script setup>
import {mainStore} from "@/store";
import {onMounted, ref} from "vue";

const store = mainStore();

const emit = defineEmits(["loadComplete"]);

// 壁纸随机数
// 请依据文件夹内的图片个数修改 Math.random() 后面的第一个数字
const bgRandom = Math.floor(Math.random() * 10 + 1);
const bgUrl = ref('');


// 图片加载完成
const imgLoadComplete = () => {
    setTimeout(() => {
        console.log("壁纸加载且动画完成");
        store.imgLoadStatus = true
        bgUrl.value = `/images/background${bgRandom}.jpg`;
        // 加载完成事件
        emit("loadComplete");
    }, 1500);
};


onMounted(() => {
    imgLoadComplete()
})

</script>

<style lang="scss" scoped>
.cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.25s;
  z-index: -1;

  &.show {
    z-index: 1;
  }

  .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    backface-visibility: hidden;
    filter: blur(20px) brightness(0.3);
    transition: filter 0.3s,
    transform 0.3s;
    animation: fade-blur-in 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.45s;
  }

  .gray {
    opacity: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.5) 100%),
    radial-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3) 166%);

    transition: 1.5s;

    &.hidden {
      opacity: 0;
      transition: 1.5s;
    }
  }

  .down {
    font-size: 16px;
    color: white;
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: block;
    padding: 20px 26px;
    border-radius: 8px;
    background-color: #00000030;
    width: 120px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
      transform: scale(1.05);
      background-color: #00000060;
    }

    &:active {
      transform: scale(1);
    }
  }
}
</style>
